<template>
    <div>
        <div>
            <van-nav-bar
                    title="景点详情"
                    left-text="返回"
                    left-arrow
                    @click-left="tzback()"
            />
        </div>

        <!--1.内容-->
        <div>
            <van-image
                    width="400"
                    height="300"
                    :src="viewsDetail.imgurl"
            ></van-image>
        </div>
        <div>
            <van-cell-group>
                <van-cell v-html="jingdian"  />
                <van-cell title="" :value="viewsDetail.detail" label="描述信息" />
            </van-cell-group>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
        name: "ViewsDetail",
        data(){
            return{
                viewsDetail:{

                },
                jingdian:"<h1>景点介绍</h1>"
            }
        },
        mounted() {
            //页面加载，就会执行
            //axios请求后端接口 查询详情
            //获取商品id和type(1商品 2秒杀商品),获取用户id（VueX）
            var id=this.$route.query.vid;

            this.axios.get("/api/view/queryOne?vid="+id).then(res=>{
                if(res.data.code==200){

                    //成功
                    this.viewsDetail=res.data.data;
                    console.log(this.viewsDetail);
                }else{
                    //失败
                    Toast('亲，网络异常！');
                }

            })
        },
        methods:{
            tzback(){
                history.back();
            }
        }
    }
</script>

<style scoped>
    .l1{
        font-size: 1rem;
    }
    .l2{
        font-size: 1rem;
        color: red;
    }
</style>